<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogShow" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务标识" prop="appname">
              <common-input v-model="form.appname" placeholder="请输入服务标识"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="服务名称" prop="title">
              <common-input v-model="form.title" placeholder="请输入服务名称"/>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item label="机器地址">
              <common-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="form.g" placeholder="请输入执行器地址列表，多地址逗号分隔" />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="disabledFlag">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {executor_save, executor_update} from '@/api/taskcenter/all.js';

  export default {
    components: {},
    props: {},
    data() {
      return {
        dialogTitle: '新增', // 标题
        dialogShow: false, // 是否显示
        form: {},
        rules: {
          appname: [
            {required: true, message: '请输入服务标识', trigger: 'blur',},
            {min: 4, max: 64, message: '长度限制4 - 64个字符之间', trigger: 'blur'}
          ],
          title: [
            {required: true, message: '请输入服务名称', trigger: 'blur'},
            {min: 4, max: 64, message: '长度限制4 - 64个字符之间', trigger: 'blur'}
          ],
        },
        disabledFlag: false,
      };
    },
    watch: {},
    computed: {},
    methods: {
      /**
       * 关闭
       */
      close() {
        this.$refs.form.resetFields();
        this.dialogShow = false;
        this.$emit('refresh');
      },
      /**
       * 显示
       */
      show(data) {
        this.dialogTitle = data.id ? '编辑' : '新增';
        this.dialogShow = true;
        this.form = data.id ? data : this.$options.data().form;
      },
      /**
       * 提交
       */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.disabledFlag = true;
            if (this.form.id) {
              executor_update(this.form)
                .then((res) => {
                  this.$GlobalSuccessMessage('操作成功');
                  this.close();
                })
                .finally((res) => {
                  this.disabledFlag = false;
                });
            } else {
              executor_save(this.form)
                .then((res) => {
                  this.$GlobalSuccessMessage('操作成功');
                  this.close();
                })
                .finally((res) => {
                  this.disabledFlag = false;
                });
            }
          }
        });
      },
    },
    created() {
    },
    mounted() {
    },
  };
</script>
<style lang="scss" scoped>
</style>
